<template>
  <el-dialog :title="textSingleproduct[dialogStatus]" :visible.sync="dialogFormVisible" :show-close="false"
    class="Singleproduct" width="60%" :before-close="handleCloseSingleproduct">
    <el-form :model="SingleproductForm" :rules="Singleproductrules" ref="SingleproductForm" label-width="100px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model.trim="SingleproductForm.name" style="width: 300px" size="small" type="textarea" maxlength="64"
          show-word-limit :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
      </el-form-item>
      <el-form-item label="商品简称">
        <el-input placeholder="请输入商品简称" v-model="shopAbbreviation" maxlength="10" style="width: 300px" clearable>
        </el-input>
      </el-form-item>

      <el-form-item label="蛋糕类型" required>
        <el-cascader ref="cascaderAddr" v-model="selectedValue" :options="cakelist" clearable @change="handelcategoryName"
          @visible-change="getcakelist"></el-cascader>
      </el-form-item>
      <el-form-item label="商品原料" v-show="materialsShow" required>
        <ele-multi-cascader clearable v-model="materialslistValue" :options="materialslist" separator=">"
          placeholder="选择商品原料" @change="handlematerialName" style="width: 194px"></ele-multi-cascader>
      </el-form-item>
      <el-form-item label="商品主图:" prop="mainPic" required>
        <div style="margin-bottom: 15px">
          <el-upload list-type="picture-card" action="/api/xmbz-goods/file/upload" :show-file-list="false"
            :data="{ tag: 'good' }" :on-success="handleAvatarSuccess">
            <img v-if="
              SingleproductForm.mainPic && SingleproductForm.mainPic.length
            " :src="SingleproductForm.mainPic" class="avatar" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="商品副图:" prop="title">
        <div style="margin-bottom: 15px">
          <el-upload action="/api/xmbz-goods/file/upload" :data="{ tag: 'good' }" :on-exceed="handleExceed"
            list-type="picture-card" :limit="4" :on-success="handleftSuccess" :file-list="SingleproductForm.pics"
            :on-remove="beforeRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="商品详情:">
        <el-input type="textarea" size="small" v-model.trim="SingleproductForm.description" style="width: 400px"
          maxlength="300" show-word-limit :autosize="{ minRows: 6, maxRows: 8 }"></el-input>
      </el-form-item>
      <hr />
      <h2>商品规格</h2>
      <div class="specifications">
        <!-- 判断删除显示 -->
        <div class="rows" v-for="(item, index) in SingleproductForm.goodsSkuRequests" :key="index"
          v-show="!item.isDeleted">
          <el-form-item label="规格">
            <el-input size="small" v-model.trim="item.specs" maxlength="20" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="定价(元)">
            <el-input size="small" type="number" v-model.trim="item.price" :min="0"
              oninput="if(value.length>7)value=value.slice(0,7)" style="width: 100px"></el-input>
          </el-form-item>
          <el-form-item label="sku码">
            <el-input size="small" v-model.trim="item.skuCode" style="width: 100px"
              onkeyup="value=value.replace(/[^\-?\d.a-zA-Z]/g,'').slice(0,20)" maxlength="20"
              onafterpaste="value=value.replace(/[^\-?\d.a-zA-Z]/g,'').slice(0,20)"></el-input>
          </el-form-item>
          <el-form-item label="upc码">
            <el-input size="small" type="number" v-model.trim="item.upc" :min="0" style="width: 100px" maxlength="50"
              onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"
              onafterpaste="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"></el-input>
          </el-form-item>
          <el-form-item label="商品状态">
            <el-radio-group v-model="item.goodsState">
              <el-radio :label="1">可售</el-radio>
              <el-radio :label="2">不可售</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 商品规格列表 -->
          <el-form-item>
            <div class="Delete_specification" @click="handleDelete_specification(index)">
              <i class="el-icon-remove-outline" size="medium"></i>
              <span>移除</span>
            </div>
            <div v-if="getIngredientshow()">
              <div class="upload_ingredient" @click="handleupload_ingredient(item, index)">
                <!-- v-if="item.materielState==2||item.categoryName=='蛋糕'" -->
                <i class="el-icon-circle-plus-outline"></i>
                <span>上传配料表</span>
              </div>
              <!-- 编辑配料表列表 -->
              <div class="edit_ingredient" @click="handleuedit_ingredient(item, index, indexs)"
                v-for="(items, indexs) in item.goodsSkuProductions" :key="indexs" v-show="!items.isDeleted">
                <!-- v-if="item.materielState==1||item.categoryName=='蛋糕'" -->
                <i class="el-icon-edit-outline"></i>
                <span>{{ items.foodName }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="title" @click="handleAdd_specification">
          <i class="el-icon-document-add icon"></i>添加规格，最多10个
          <!-- <img :src="iconadd" alt="" />添加规格，最多10个 -->
        </div>
        <div class="title" @click="copySpec">
          <i class="el-icon-document-copy icon"></i>从其他商品复制
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取 消
      </el-button>
      <el-button type="primary" @click="handleConfirm">
        确 定
      </el-button>
    </div>

    <!-- 物料表 -->
    <ingredientAddDialog ref="ingredientAddDialog" @save="handleSaveIngredient" @remove="removeSingleData"></ingredientAddDialog>
    <copySpecDialog ref="copySpecDialog" @confirm="handleCopySpec"></copySpecDialog>
  </el-dialog>
</template>

<script>
import {
  Categories, // 商品类型
  GoodsMaterial, //商品原料
  addGoods, //添加商品
  GoodsInfo, //详情
  goodsUpdate, //更新提交
} from "@/api/commodityfiles";
import iconadd from "@/assets/image/icon_add.png";
import ingredientAddDialog from "@/components/ingredient/addDialog";
import copySpecDialog from './copySpecDialog';
export default {
  props: {
    clickFramingchecked: {
      type: Boolean
    }
  },
  components: {
    ingredientAddDialog,
    copySpecDialog,
  },
  data() {
    return {
      iconadd,
      dialogFormVisible: false, //单个商品
      // 单个商品------------------------------------------------------------
      textSingleproduct: {
        update: "修改单个商品",
        create: "添加单个商品",
        copy: "复制单个商品",
      },
      SelectedmaterialsList: [],
      goodsPicList: [],
      shopAbbreviation: "", // 商品简称
      selectedValue: [],
      SingleproductForm: {
        name: "",
        cakeType: "",
        categoryId: "",
        categoryName: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        isOnSale: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            goodsSkuProductions: [],
            materielState: 2,
          },
        ],
      },
      Singleproductrules: {
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        commodityserch: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "change",
          },
        ],
        mainPic: [
          {
            required: true,
            message: "请上传商品主图",
            trigger: "blur",
          },
        ],
        cakeType: [
          {
            required: true,
            message: "请至少选择一个商品类型",
            trigger: "change",
          },
        ],
        Commoditymaterials: [
          {
            required: true,
            message: "请至少选择一个商品原料",
            trigger: "change",
          },
        ],
        specs: [
          {
            required: true,
            message: "请输入商品规格",
            trigger: "blur",
          },
        ],
        skuCode: [
          {
            required: true,
            message: "请输入商品sku码",
            trigger: "blur",
          },
        ],
        upc: [
          {
            required: true,
            message: "请输入商品upc码",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入商品定价",
            trigger: "blur",
          },
        ],
      },
      cakelist: [],
      materialslistValue: [],
      materialslist: [],
      dialogStatus: "",
      checkedmaterialslist: [],
      addindex: -1,
      eidtingredientID: '', // 下标
      eidtingredient: {},
    };
  },
  computed: {
    materialsShow() {
      return this.selectedValue && this.selectedValue.includes('1670323326059520')
    }
  },
  methods: {
    show({ status, data }) {
      this.dialogStatus = status;
      this.dialogFormVisible = true;
      this.getcakelist(); //查蛋糕类型
      this.initSingleInfo();
      this.goodsInfo = data || {}
      if (data) {
        this.getGoodsInfo(data)
      }
    },
    getGoodsInfo(item) {
      GoodsInfo({
        goodsId: item.id
      }).then(response => {
        var materialIdlsit = []
        this.shopAbbreviation = item.alias
        this.SingleproductForm.name = response.data.data.name;
        this.SingleproductForm.categoryId = response.data.data.categoryId;
        this.SingleproductForm.id = response.data.data.id;
        this.SingleproductForm.mainPic = response.data.data.mainPic;
        this.SingleproductForm.description = response.data.data.description;
        this.selectedValue = [item.parentCategoryId, item.categoryId]
        this.checkedmaterialslist =
          response.data.data.goodsRelationMaterialVOList;
        this.checkedmaterialslist.map(child => {
          materialIdlsit.push(child.materialId);
        });
        this.materialslistValue = materialIdlsit
        this.SingleproductForm.pics = response.data.data.goodsPicList;
        this.goodsPicList = response.data.data.goodsPicList;
        this.SingleproductForm.goodsSkuRequests =
          response.data.data.goodsSkuList.map(item => {
            return {
              ...item,
              price: item.modifyPrice
            }
          });
        this.SingleproductForm.pics.map(child => {
          child.url = child.pic;
        });
      });
    },
    handleCloseSingleproduct() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.dialogFormVisible = false;
        })
        .catch(() => { });
    },
    handelcategoryName(item) {
      if (item) {
        this.SingleproductForm.categoryId = item[1];
        var str = [];
        this.cakelist.map((parent) => {
          parent.children.map((child) => {
            if (item[1] === child.value) {
              str.push(child);
            }
          });
        });
      }
    },
    getcakelist() {
      Categories("").then((response) => {
        // this.cakelist = response.data.data;
        const batchdata = response.data.data;
        const dataValueBatch = (batchdata) =>
          batchdata.map(({ id, categoryName, children }) =>
            children
              ? {
                value: id,
                label: categoryName,
                children: dataValueBatch(children),
              }
              : {
                value: id,
                label: categoryName,
              }
          );
        this.cakelist = dataValueBatch(batchdata);
      });
    },
    handlematerialName(values, item) {
      console.log(this.materialslistValue)
      if (this.checkedmaterialslist.length >= 10) {
        this.$message({
          message: "该商品原料最多可添加10个",
          type: "warning",
        });
        return false;
      } else {
        const SelectedmaterialsList = [];
        item.map((child) => {
          SelectedmaterialsList.push({
            materialId: child.value,
            materialName: child.label,
            parentId: child.parentId,
          });
        });

        this.checkedmaterialslist = SelectedmaterialsList;
      }
    },
    handlecommodityindexClose(tag, index) {
      this.checkedmaterialslist.splice(index, 1);
    },
    getGoodsMaterial() {
      //商品原料
      GoodsMaterial("").then((response) => {
        const batchdata = response.data.data;
        const dataValueBatch = (batchdata) =>
          batchdata.map(({ id, materialName, children }) =>
            children
              ? {
                value: id,
                label: materialName,
                children: dataValueBatch(children),
                disabled: true,
              }
              : {
                value: id,
                label: materialName,
              }
          );
        this.materialslist = dataValueBatch(batchdata);
      });
    },
    // 单个主图开始上传
    handleAvatarSuccess(response, file, fileList) {
      this.SingleproductForm.mainPic = response.data;
      console.log(fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // 幅图上传
    handleftSuccess(response) {
      this.SingleproductForm.pics.push({
        url: response.data,
      });
    },
    beforeRemove(index) {
      this.SingleproductForm.pics.splice(index, 1);
    },
    handleDelete_specification(index) {
      //删除规格
      this.$confirm("此操作将永久删除该规格, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.SingleproductForm.goodsSkuRequests.length <= 1) {
            this.$message({
              type: "warning",
              message: "至少留一个商品规格，不可移除!",
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.SingleproductForm.goodsSkuRequests.splice(index, 1);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getIngredientshow() {
      // 蛋糕，定制蛋糕显示上传及编辑配料表
      return (
        this.selectedValue &&
        (this.selectedValue.includes("1670323326059520") ||
          this.selectedValue.includes("1670323326059521"))
      );
    },
    //上传配料表
    handleupload_ingredient(item, index) {
      this.$refs.ingredientAddDialog.show({ type: 'add' })
      this.addindex = index;
    },
    //编辑物料表
    handleuedit_ingredient(item, index, index2) {
      this.entIndex = index2; // 获取当前点击的是个
      this.$refs.ingredientAddDialog.show({ type: 'edit', data: item.goodsSkuProductions[index2] })
      this.addindex = index;
    },
    handleAdd_specification() {
      //添加规格
      if (this.SingleproductForm.goodsSkuRequests.length <= 10) {
        this.SingleproductForm.goodsSkuRequests.push({
          specs: "", //规格名
          skuCode: "", // sku 码
          upc: "", // uPc
          goodsState: 1, //商品状态
          isCombination: 1,
          goodsSkuProduction: null,
          materielState: 2,
          goodsSkuProductions: [], // 配料数组
          isDeleted: 0, // 是否是本地保存
          price: "", //价格
        });
      } else {
        this.$message({
          message: "该商品规格最多可添加10个",
          type: "warning",
        });
        return false;
      }
    },
    handleConfirm() {
      if (this.dialogStatus === 'create' || this.dialogStatus === 'copy') {
        this.createSingleData(this.SingleproductForm, 'SingleproductForm')
      } else if (this.dialogStatus === 'update') {
        this.updateSingleData(this.SingleproductForm, 'SingleproductForm')
      }
    },
    createSingleData(item, verification) {
      this.$refs[verification].validate((valid) => {
        if (valid) {
          const errorMsg = this.validateForm()
          if (errorMsg) {
            this.$message(errorMsg);
            return false;
          }
          var goodsSkuRequests = [];

          item.goodsSkuRequests.map((item) => {
            goodsSkuRequests.push({
              goodsState: item.goodsState,
              isCombination: item.isCombination,
              price: item.price * 100,
              skuCode: item.skuCode,
              specs: item.specs,
              upc: item.upc,
              goodsSkuProduction: item.goodsSkuProduction,
              goodsSkuProductions: item.goodsSkuProductions,
              materielState: (item.goodsSkuProductions && item.goodsSkuProductions.length > 0) ? 1 : 2,
            });
          });
          var str = [];
          this.cakelist.map((parent) => {
            parent.children.map((child) => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });
          //单个商品新增提交
          const Singleproduct = {
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            deptId: this.goodsInfo.deptId ? this.goodsInfo.deptId :
                    (this.clickFramingchecked == true ? "1" : this.cityareaId),
            name: item.name,
            categoryId: item.categoryId,
            materialId: this.materialslistValue.map(item => item + ''),
            mainPic: item.mainPic,
            pics: item.pics.map(item => item.url),
            description: item.description,
            isCombination: 1,
            goodsSkuRequests: goodsSkuRequests,
            goodsCombinationRequests: [],
            alias: this.shopAbbreviation,
          };
          addGoods(Singleproduct).then((res) => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.$notify({
                title: "添加商品",
                message: "添加商品成功",
                type: "success",
                duration: 2000,
              });
              this.$emit('getList');
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    updateSingleData(item, verification) {
      this.$refs[verification].validate((valid) => {
        if (valid) {
          const errorMsg = this.validateForm()
          if (errorMsg) {
            this.$message(errorMsg);
            return false;
          }

          var str = [];
          this.cakelist.map((parent) => {
            parent.children.map((child) => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });

          var goodsSkuRequests = this.SingleproductForm.goodsSkuRequests;
          //单个商品编辑提交
          const SingleproductForm = {
            deptId: this.goodsInfo.deptId,
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            id: item.id,
            name: item.name,
            categoryId: item.categoryId,
            materielState: 1, //上传状态
            materialId: this.materialslistValue,
            mainPic: item.mainPic,
            pics: item.pics.map(item => item.url),
            description: item.description,
            isCombination: 1,
            goodsSkuRequests: goodsSkuRequests.map(item => {
              return {
                ...item,
                price: item.price * 100,
                materielState: (item.goodsSkuProductions && item.goodsSkuProductions.length > 0) ? 1 : 2
              }
            }),
            goodsCombinationRequests: [],
            isOnSale: 1,
            alias: this.shopAbbreviation,
          };
          // 判断是否是删除状态 删除状态
          let selectArr = [];
          this.SingleproductForm.goodsSkuRequests.map((item, index) => {
            let newArr = new Array();
            item.goodsSkuProductions.map((items, index) => {
              newArr.push(items.isDeleted);
            });
            selectArr.push(newArr);
          });

          selectArr.map((item, index) => {
            if (
              item.length == 0 ||
              item.every((item) => {
                return item == 1;
              })
            ) {
              this.SingleproductForm.goodsSkuRequests[index].materielState = 2;
            }
          });

          goodsUpdate(SingleproductForm).then((res) => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.$notify({
                title: "修改商品",
                message: "修改商品成功",
                type: "success",
                duration: 2000,
              });
              this.$emit('getList');
              this.cakelist = [];
              this.initSingleInfo();
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    validateForm() {
      const item = this.SingleproductForm
      if (this.materialsShow && this.materialslistValue && this.materialslistValue.length == 0) {
        return '请选择蛋糕原料';
      }
      if (!this.selectedValue || !this.selectedValue.length) {
        return '请选择蛋糕类型'
      }
      if (item.goodsSkuRequests && item.goodsSkuRequests.length) {
        if (!item.goodsSkuRequests.every(item => item.specs)) {
          return '规格名必填'
        }
        if (item.goodsSkuRequests.some(item => item.specs <= 0)) {
          return '规格名的值必须大于0'
        }
        if (!item.goodsSkuRequests.every(item => item.price)) {
          return '单价必填'
        }
        if (!item.goodsSkuRequests.every(item => item.skuCode)) {
          return 'sku码必填'
        }
      }
      
    },
    initSingleInfo() {
      this.shopAbbreviation = ""; // 新添加的字段显示空
      this.dialogImageUrl = "";
      this.selectedValue = [];
      this.materialslistValue = [];
      this.SingleproductForm = {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            materielState: 2,
          },
        ],
      };
    },
    // 上传配料表  事件
    addingredientform(somedata) {
      console.log(this.SingleproductForm.goodsSkuRequests)
      // 将somedata 传递给创建的参数里去 是一个对象
      if(!this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions){
        this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions = []
      }
      this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions.push(somedata)
      this.$forceUpdate()
    },
    eidtingredientedit(somedata) {
      this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions[this.entIndex] = somedata;
      this.$forceUpdate()
    },
    handleSaveIngredient({ type, data }) {
      if (type === 'add') {
        this.addingredientform(data)
      } else if (type === 'edit') {
        this.eidtingredientedit(data)
      }
    },
    removeSingleData(){
      // 隐藏显示框
      if(this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions[this.entIndex].id){
        this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions[this.entIndex].isDeleted = 1
        // 改变状态 但是内容无法显示
      }else{
        this.SingleproductForm.goodsSkuRequests[this.addindex].goodsSkuProductions.splice(this.entIndex,1)
      }
      this.$forceUpdate()
    },
    // 复制规格
    copySpec() {
      this.$refs.copySpecDialog.show()
    },
    handleCopySpec(specList) {
      this.SingleproductForm.goodsSkuRequests = this.SingleproductForm.goodsSkuRequests.concat(specList.map(item => {
        const obj = {
          goodsSkuProductions: item.goodsSkuProductions && item.goodsSkuProductions.map($1 => {
            return {
              ...$1,
              goodsSkuProductionNutrientsList: $1.goodsSkuProductionNutrientsList && $1.goodsSkuProductionNutrientsList.map($2 => {
                return {
                  content: $2.content,
                  item: $2.item,
                  percentage: $2.percentage,
                }
              }),
              goodsSkuProductionNutrientsExtList: $1.goodsSkuProductionNutrientsExtList && $1.goodsSkuProductionNutrientsExtList.map($2 => {
                return {
                  content: $2.content,
                  item: $2.item,
                  percentage: $2.percentage,
                }
              }),
            }
          }), 
        }
        // 保留字段
        const fields = ['goodsState', 'isCombination', 'isDeleted', 'materielState', 'price', 'skuCode', 'specs', 'upc']
        fields.forEach(f => {
          obj[f] = item[f]
        })
        return obj
      }))
    },
  },
  mounted() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    this.getGoodsMaterial()
  }
};
</script>
<style lang="scss" scoped>
.specifications {
  .title {
    display: flex;
    align-items: center;
    line-height: 30px;
    color: #ff0000;
    font-size: 16px;

    .icon {
      font-size: 24px;
      margin-right: 8px;
      color: #409eff;
    }
  }

  .rows {
    display: flex;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px !important;

    .el-form-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px !important;

      .el-form-item__label {
        text-align: left;
      }

      .el-form-item__content {
        margin-left: 0 !important;
      }
    }

    .Delete_specification {
      margin-top: 20px;
      display: flex;
      line-height: 28px;

      span {
        font-size: 15px;
        color: #ff0000;
        padding-left: 5px;
      }

      i {
        font-size: 20px;
        line-height: 28px;
        color: #ff0000;
      }
    }

    .upload_ingredient {
      display: flex;
      line-height: 28px;

      i {
        font-size: 20px;
        line-height: 28px;
        color: green;
      }

      span {
        font-size: 15px;
        color: green;
        padding-left: 5px;
      }
    }

    .edit_ingredient {
      display: flex;
      line-height: 28px;

      i {
        font-size: 20px;
        line-height: 28px;
        color: #e2ba24;
      }

      span {
        font-size: 15px;
        color: #e2ba24;
        padding-left: 5px;
      }
    }
  }
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
